<template>
	<view class="Frame">
		<view style="height: 125rpx;">
			<!-- 2.0.19支持autoBack，默认为false -->
			<up-navbar title="个人信息" :autoBack="true">
			</up-navbar>
		</view>

		<view class="Avatar1">头像
			<image class="t-toux1" src="/static/图片/头像.jpeg"></image>
			<view class="arrowhead1">
				<view class="right2"><image class="arrowhead3" src="/static/svg/arrow01.svg" mode=""></image></view>
			</view>
		</view>
		<view class="NiCheng">昵称
			<view class="nicheng">zcl-zhangchulan</view>
			<view class="arrowhead2"><image class="arrowhead3" src="/static/svg/arrow01.svg" mode=""></image></view>
		</view>

		<view class="Student-Information">部门
			<view class="SI">协会</view>
		</view>
		<view class="Name1">姓名
			<view class="mingzi1">张楚岚</view>
		</view>

		<view class="gender">性别
			<view class="sex1">
				<up-radio-group v-model="value" iconPlacement="right">
					<up-radio :value="0" label="男" style="margin-right: 5px;"></up-radio>
					<up-radio :value="1" label="女"></up-radio>
				</up-radio-group>
			</view>
		</view>


		<view class="College">年级
			<view class="nianji">2025</view>
		</view>
		<view class="ID">学号
			<view class="id">20250101</view>
		</view>
		<view class="Grade">学院
			<view class="xeuyuan">大数据与计算机学院</view>
		</view>
		<view class="Class">班级
			<view class="banji">25级软件工程4班</view>
		</view>
		<view class="Date">注册时间
			<view class="zhuce-time">2025-09-01</view>
		</view>
		<view class="Wechat-Infortion">微信信息</view>
		<view class="Avatar2">头像
			<image class="t-toux2" src="/static/图片/头像.jpeg"></image>
		</view>
		<view class="Name2">昵称
			<view class="mingzi2">微信用户</view>
		</view>

	</view>

</template>

<script setup>
import { ref } from 'vue';

	const value = ref(0);
</script>

<style lang="scss" scoped>
	.Frame {
		background-size: cover;
		height: 100%;
		width: 100%;
		position: absolute;
		background-color: whitesmoke;
		border: 1px solid whitesmoke;
		font-family: 宋体;
	}

	.Personal-Information {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: center;
		padding-top: 2%;
		color: rgb(71, 71, 74);
		font-weight: 500;
		font-size: large;
		position: relative;
	}

	.one {
		height: 25px;
		width: 25px;
		position: absolute;
		top: 25%;
		left: 2%;
	}

	.two {
		top: 20%;
		right: 10%;
		position: absolute;
	}

	.three {
		top: 28%;
		right: 5%;
		position: absolute;
	}

	.Avatar1 {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 11%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		top: 6%;
	}

	.t-toux1 {
		position: absolute;
		top: 12%;
		right: 6%;
		width: 34px;
		height: 34px;
		border-radius: 50%;
	}

	.arrowhead1 {
		position: absolute;
		top: 14%;
		right: 0%;
	}

	.NiCheng {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 15px;
		padding-left: 3%;
		position: relative;

	}

	.nicheng {
		position: absolute;
		font-size: medium;
		top: 18%;
		right: 5%;
	}

	.arrowhead2 {
		position: absolute;
		top: 18%;
		right: 0%;
	}


	.arrowhead3 {
		position: absolute;
		top: 22%;
		right: 1%;
		width: 18px;
		height: 18px;
	}

	.Name1 {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.mingzi1 {
		position: absolute;
		font-size: medium;
		position: absolute;
		top: 25%;
		right: 5%;
	}

	.gender {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sex1 {
		margin-left: 240px;
		margin-right: 10px;
	}

	.College {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.nianji {
		position: absolute;
		font-size: medium;
		position: absolute;
		top: 30%;
		right: 5%;
	}

	.Student-Information {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		color: rgb(71, 71, 74);
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;
	}

	.SI {
		font-size: medium;
		position: absolute;
		top: 25%;
		right: 5%;
	}

	.ID {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.id {
		position: absolute;
		font-size: medium;
		top: 20%;
		right: 5%;
	}

	.Grade {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.xeuyuan {
		position: absolute;
		font-size: medium;
		top: 25%;
		right: 5%;
	}

	.Class {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.banji {
		position: absolute;
		font-size: medium;
		top: 25%;
		right: 5%;
	}

	.Date {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 15px;
		padding-left: 3%;
		position: relative;

	}

	.zhuce-time {
		position: absolute;
		font-size: medium;
		top: 20%;
		right: 5%;
	}

	.Wechat-Infortion {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		color: rgb(71, 71, 74);
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;

	}

	.Avatar2 {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;

	}

	.t-toux2 {
		position: absolute;
		top: 10%;
		right: 6%;
		width: 29px;
		height: 29px;
		border-radius: 50%;
	}

	.Name2 {
		height: 4%;
		width: auto;
		background-color: white;
		text-align: left;
		padding-top: 2%;
		text-decoration-color: darkgray;
		font-weight: 450;
		font-size: large;
		margin-bottom: 2px;
		padding-left: 3%;
		position: relative;
	}

	.mingzi2 {
		position: absolute;
		font-size: medium;
		top: 20%;
		right: 5%;
	}
</style>